<template>
    <div class="home container">
      <div class="controlbox">
        <el-tooltip class="item" effect="dark" content="点击进行定位" placement="left-start">
          <i class="el-icon-map-location" style="color:blue; margin-top: 10px;" @click="drawLine"></i>
        </el-tooltip>
      </div>
      <div id="map" class="map-container" :style="{'width':mapWidth,'height':mapHeight}"></div>
      <el-tooltip class="item" effect="light" placement="left">
			<div slot="content">
				<div class="mapbox">
					<li @click="mapChangeType(0)" :class="models.active[0]?'activeStyle':''">
            <img src="../assets/image/dixing.jpg" width="100px" height="50px">
						<div class="on">地形地图</div>
					</li>
					<li @click="mapChangeType(1)" :class="models.active[1]?'activeStyle':''">
            <img src="../assets/image/yingxiang.jpg" width="100px" height="50px">
						<div class="on">影像地图</div>
					</li>
				</div>
			</div>
			<div class="map0"></div>
		</el-tooltip>
    </div>
  </template>
<script lang="ts">
import { Map, View } from "ol";
import { FullScreen } from "ol/control";
import { Vector as VectorSource } from "ol/source";
import { Tile as TileLayer} from "ol/layer";
import { Vector as VectorLayer } from "ol/layer";
import { XYZ} from "ol/source";
import { Component, Vue,Prop,Watch} from 'vue-property-decorator';
import GeoJSON from "ol/format/GeoJSON";

import {uploadJsonAsFile} from '@/utils/axios';
@Component({})
export default class OlMap extends Vue {

  @Prop() private mapWidth!: string;
  @Prop() private mapHeight!: string;
  @Prop() private vectorId!: string;

  models: any = {
    resourceUrl: '/resources/file/',
    tempSource: null,
    map: null,
    geoJsonSource: null,
    polygonSource: null,
    drawGeoJson: '',
    active: [true, false],
    modify: null
  }

  originLayers = [
    {
      visible: true,
      urlPattern: "https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}"
    },
    {
      visible: false,
      urlPattern: "https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}"
    }
  ];

  get baseUrl() {
    return `${process.env.VUE_APP_DISK}${process.env.VUE_APP_BASE_API}${this.models.resourceUrl}`;
  }

  createBaseLayers() {
    const layers: any = [];
    this.originLayers.forEach(l => {
      layers.push(
        new TileLayer({
          source: new XYZ({
            url: l.urlPattern
          }),
          visible: l.visible
        })
      )
    });
    return layers;
  }


  initMap() {
    this.models.map = new Map({
      target: "map",
      controls: [new FullScreen()],
      layers: 
        this.createBaseLayers(),
      
      view: new View({
        // 将呼市作为地图中心
        center: [111.670801, 40.818311],
        zoom: 8,
        projection: "EPSG:4326",
      }),
    });
  }


  outputJson() {
    let features = this.models.geoJsonSource.getFeatures();
    let jsonObj = new GeoJSON().writeFeatures(features);
    uploadJsonAsFile(jsonObj).then((res: any) => {
      this.models.drawGeoJson = res.data.id;
    })
  }

  mapChangeType(x: any) {

    const layers = this.models.map.getLayers();
    if(!layers){
      return;
    }
    const layerLength = layers.values_.length;

    if( layerLength>= this.models.active.length){
      this.buildActivueStatus(x);
      this.models.active.forEach((val:any,idx:any) =>{
        const layer = layers.array_[idx]
        layer.setVisible(val);
      })
    }
  }
  buildActivueStatus(index: any) {
    this.models.active.forEach((it:any, idx:any) =>{
      this.models.active[idx] = false;
    });
    this.models.active[index] = true; // 设置激活的键为 true
    console.log(this.models.active)
}

  loadGeoJson(newValue) {
    const val = newValue || this.vectorId;
    if (val) {

      this.models.geoJsonSource = new VectorSource({
        url: this.baseUrl + val,
        format: new GeoJSON()
      });

      const geoJsonLayer = new VectorLayer({ source: this.models.geoJsonSource });
      if (this.models.geoJsonSource) {
        this.models.map.addLayer(geoJsonLayer);
      }
    }
  }

  drawLine(){
    console.log('画线')
  }

  @Watch('vectorId')
  updateVectore(val: any) {
    if (this.models.geoJsonSource) {
       this.models.geoJsonSource = null;
       this.models.geoJsonSource.clear();
    }
    if (val) {
      this.loadGeoJson(val);
    }
  }

  mounted() {
    this.initMap();
  }
}
  </script>
  <style>
  .map0 {
    opacity:0.8;
		width: 24px;
		height: 24px;
		background: url(../assets/image/tooltip.png) center center no-repeat;
		background-size: 16px 16px;
		position: absolute;
		right: 60px;
		top: 10px;
		z-index: 200;
		cursor: pointer;
	}
  .map1 {
    opacity:0.5;
		width: 250px;
		height: 40px;
		background: #000 center center no-repeat;
		position: absolute;
		right: 0px;
		top: 0px;
		z-index: 200;
		cursor: pointer;
	}

	.mapbox {
		width: 220px;
		height: 60px;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	.mapbox li {
		width: 100px;
		height: 50px;
		margin: 5px 0;
		display: block;
		position: relative;
		cursor: pointer;
	}

	.mapbox li .on {
		height: 16px;
		width: 100px;
		background-color: rgba(0, 0, 0, 0.3);
		color: #fff;
		font-size: 12px;
		position: absolute;
		bottom: 0;
		left: 0;
		display: none;
		text-align: center;
	}
  .mapbox li:hover .on{ display: block;}
	.activeStyle {
		width: 100px;
		height: 50px;
		border: 1px solid #f00;
	}
  .container {
		border: 1px solid #42B983;
		position: relative;
    min-width: 100vh;
	}

  .controlbox {
    opacity:0.8;
		position: absolute;
		z-index: 10000;
		bottom: 200px;
		width: 18px;
		padding: 5px 7px;
		height: 200px;
		right: 20px;
		border: 1px solid #ccc;
		border-radius: 4px;
		cursor: pointer;
		display: flex;
		align-content: space-between;
		flex-direction: column;
		background-color: #fff;
	}

	.getlength0 {
		width: 18px;
		height: 30px;
		background: url(../assets/image/getnlength.png) center center no-repeat;
		background-size: 16px 16px;
	}

	.getarea0 {
		width: 18px;
		height: 30px;
		background: url(../assets/image/getarea.png) center center no-repeat;
		background-size: 16px 16px;
	}

</style>
